<template>
  <div class="query-modal" @click.self="close">
    <div class="query-container">
      <el-card class="card">
        <div class="close-btn" @click="close">
          <el-icon><Close /></el-icon>
        </div>

        <h2 class="query-title">快速查询</h2>
        
        <!-- 维护提示 -->
        <el-alert
          title="系统维护中"
          message="查询功能暂时不可用，查询请登录后于学生端查询！"
          type="warning"
          show-icon
          style="margin-bottom: 20px;"
        />

        <el-form :model="form" ref="formRef" label-width="60px" size="small" :disabled="isMaintaining">
          <el-form-item
            label="学号"
          >
            <el-input v-model="form.studentId" placeholder="系统维护中，暂不可输入" :disabled="isMaintaining" />
          </el-form-item>
          <el-form-item
            label="密码"
          >
            <el-input v-model="form.password" type="password" placeholder="系统维护中，暂不可输入" :disabled="isMaintaining" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" :disabled="isMaintaining">查询</el-button>
            <el-button :disabled="isMaintaining">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElIcon } from 'element-plus'
import { Close } from '@element-plus/icons-vue'

export default {
  name: 'QuickQuery',
  components: { ElIcon, Close },
  emits: ['close'],
  data() {
    return {
      form: {
        studentId: '',
        password: ''
      },
      loading: false,
      errorMsg: '',
      studentInfo: null,
      isMaintaining: true // 系统维护标识
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleReset() {
      // 维护期间不执行重置
    },
    handleQuery() {
      // 维护期间不执行查询
      ElMessage({
        message: '系统维护中，查询功能暂不可用，请登录后于学生端查询！',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.query-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.query-container {
  width: 420px;
  position: relative;
}

.card {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
}

.query-title {
  text-align: center;
  font-size: 20px;
  color: #1e3a8a;
  margin-bottom: 20px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  color: #666;
}
</style>